<template>
	<view>
		<cu-custom :key="'header'+headerKey" bgColor="bg-gradual-red-yellow" :isBack="true" backText="返回" :title="headerTitle">
		</cu-custom>
		<view class="cu-bar bg-gradual-red-yellow" @tap="gotoSearch" style="padding-bottom: 10rpx;">
			<view class="search-form round" style="background-color:#FFFFFF;">
				<text class="basefont icon-search"></text>
				<input style="background-color:#FFFFFF;border-radius: 5000rpx; " disabled="true" :adjust-position="false" placeholder="搜索你想看的···" confirm-type="search"></input>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
			<article-item  v-if="articleList&&articleList.length>0" v-for="(item,index) in articleList" :key="index" :options="item" @click="gotoDetail($event)"></article-item>
		</mescroll-body>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import api from '@/api/system/article.js';
	import store from '@/store';
	export default{
		mixins: [MescrollMixin],
		onShow() {
			this.headerKey += 1;
		},
		data(){
			return {
				headerKey:0,
				areaCode: store.state.hh_areaCode,
				downOption: {
					use:true,
					auto: true //是否在初始化后,自动执行downCallback; 默认true
				},
				articleList:[],
				articleType:'',
				orgId:'',
				clientId:'',
				showPosition:'',
				headerTitle:'文章列表'
			}
			
		},	
		onLoad: function (option) {
			this.articleType=option.articleType
			if(option.orgId){
				this.orgId=option.orgId
			}
			if(option.clientId){
				this.clientId=option.clientId
			}
			if(option.showPosition){
				this.showPosition=option.showPosition
			}
			if(option.headerTitle){
				this.headerTitle=decodeURIComponent(option.headerTitle)
			}
			if(!this.articleType){
				this.articleType='notice'
			}
		},
		methods:{
			/*下拉刷新的回调 */
			downCallback() {
				//联网加载数据
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				const data={}
				data.pageNum=page.num
				data.pageSize=page.size
				this.getarticleList(data)
			},
			getarticleList(data){
				const hhCache = getApp().globalData.hhCache;
				let cacheKey = this.articleType+"_serachText"
				const searchText = hhCache.get(cacheKey)
				if(searchText){
					data.searchText=searchText
				}
				if(this.areaCode){
					data.areaCode=this.areaCode
				}
				if(this.articleType){
					data.articleType=this.articleType
				}
				if(this.orgId){
					data.orgId=this.orgId
				}
				if(this.clientId){
					data.clientId=this.clientId
				}
				if(this.showPosition){
					data.showPosition=this.showPosition
				}
				const pageNum =data.pageNum
				this.$http.post(api.getArticleList, data).then(res => {
					//联网成功的回调,隐藏下拉刷新的状态
					const result = res.result
					//设置列表数据
					if(this.mescroll.num == 1) {
						this.articleList = []; //如果是第一页需手动置空列表
					}
					this.articleList=this.articleList.concat(result.list);
					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					const hasNextPage = result.hasNextPage
					if(pageNum==10){
						hasNextPage=false
					}
					this.mescroll.endSuccess(result.size,hasNextPage);
					
					// 如果数据较复杂,可等到渲染完成之后再隐藏下拉加载状态: 如
					this.$nextTick(()=>{
						this.mescroll.endSuccess(result.size)
					})
					
				}).catch(error => {
					//联网失败的回调,隐藏下拉刷新的状态
					this.mescroll.endErr();
				})
			},
			gotoSearch(){
				const params = {}
				params.articleType=this.articleType
				this.$Router.push({ path:'/pages/system/article/article-search',query:params})
			},
			gotoDetail(e){
				console.log(e)
			}
		}
		
	}
</script>

<style>
	
</style>
